<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Chat Dialog Example</title>
		<style>
			/* 整体聊天窗口背景 */
			body {
				background-color: #f5f5f5;
				font-family: Arial, Helvetica, sans-serif;
				margin: 0;
				padding: 0;
			}

			/* 输入框区域样式 */
			.input-area {
				display: flex;
				align-items: center;
				padding: 10px;
				background-color: #ffffff;
				border-top: 1px solid #e0e0e0;
			}

			/* 输入框样式 */
			.chat-input {
				flex: 1;
				border: 1px solid #e0e0e0;
				border-radius: 5px;
				padding: 5px;
				font-size: 14px;
			}

			.chat-input:focus {
				border-color: #3399ff;
			}

			/* 发送按钮样式 */
			.send-button {
				background-color: #3399ff;
				border: none;
				border-radius: 50%;
				width: 30px;
				height: 30px;
				margin-left: 10px;
				cursor: pointer;
			}

			.send-button:hover {
				background-color: #007acc;
			}

			.send-button img {
				width: 15px;
				height: 15px;
				margin: 7px;
			}
		</style>
	</head>

	<body>
		<div class="chat-dialog">
			<div class="chat-messages" id="chatMessages">
				<!-- 示例消息：自己发送的消息 -->
				<div class="message-self">
					<p class="message-content">这是我发送的一条消息。</p>
					<p class="message-time">10:35 AM</p>
				</div>
				<!-- 示例消息：对方发送的消息 -->
				<div class="message-other">
					<p class="message-content">这是对方发送的一条消息。</p>
					<p class="message-time">10:30 AM</p>
				</div>
			</div>
			<div class="input-area">
				<input type="text" class="chat-input" id="chatInput" placeholder="请输入消息" />
				<button class="send-button" onclick="sendMessage()">
					<img src="send_arrow.png" alt="发送箭头" />
				</button>
			</div>
		</div>

		<script>
			function sendMessage() {
				const chatInput = document.getElementById("chatInput");
				const chatMessages = document.getElementById("chatMessages");
				const messageText = chatInput.value.trim();
				if (messageText !== "") {
					const messageDiv = document.createElement("div");
					messageDiv.className = "message-self";
					const contentP = document.createElement("p");
					contentP.className = "message-content";
					contentP.textContent = messageText;
					const timeP = document.createElement("p");
					timeP.className = "message-time";
					const now = new Date();
					const hours = now.getHours();
					const minutes = now.getMinutes();
					timeP.textContent = `${hours}:${minutes < 10 ? "0" + minutes : minutes} AM`;
					messageDiv.appendChild(contentP);
					messageDiv.appendChild(timeP);
					chatMessages.appendChild(messageDiv);
					chatInput.value = "";
				}
			}
		</script>
	</body>
</html>
